<template>
  <el-dialog title="微信登录" v-model="dialogVisible" width="30%" :before-close="handleClose">
    <div v-show="!f">
      <h1>账号密码登录</h1>
    </div>

    <div v-show="f">
      <img class="qrcode" src="" alt="" />
    </div>

    <div>
      <el-button @click="handleShowQrcode" v-show="!f">二维码登录</el-button>
      <el-button v-show="f">账户密码登录</el-button>
      <el-button>确认登录</el-button>
    </div>
  </el-dialog>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { getQrcode } from '@/api/login.js'
const dialogVisible = ref(true)
const f = ref(false)
const key = ref(null)
const qrcode = ref(null)

const getcode = () => {
  getQrcode().then(function (res) {
    if (res.code === 0) {
      console.log(0)
    }
    console.log(res)
    key.value = res.data.key
    qrcode.value = res.data.url
    setInterval()
  })
}
const handleShowQrcode = () => {
  f.value = true
  getcode()
}
onMounted(() => {
  if (f.value === true) {
    getcode()
  }
})
</script>

<style>
.grcode {
  width: 200px;
  height: 200px;
  border: 1px solid #e2e2e2;
}
</style>
